<template>
    <yk-space 
    dir="vertical" 
    class="menu-bar" 
    size="l"
    >
        <RouterLink 
        :to="item.path" 
        v-for="item in navLinks" 
        :key="item.path"
        class="menu-bar_nav"
        >
            <yk-space align="center" size="m">
                <!-- 一个Vue的动态组件( <component> )，通过 :is 属性动态渲染不同的图标组件。 -->
                <component :is="item.icon" style="font-size: 20px;" />
                <yk-text>{{ item.name }}</yk-text>
            </yk-space>
        </RouterLink>
    </yk-space>
</template>
<script setup lang="ts">
import { navLinks } from '../../utils/menu';
</script>

<style scoped lang="less">
.menu-bar {
    width: 160px;
    padding: @space-l;
    position: fixed;
    top: 72px;
    left: 8px;
  &_nav{
    width: 100%;
    height: 40px;
    background-color: @bg-color-l;
    border-radius: @radius-m;
    padding: @space-l;
    display: flex;
    align-items: center;
    text-decoration: none;
    .yk-icon{
    color:@font-color-ss;
    width: 16px;
    height: 16px;
   }
   &:hover{
    background-color: @bg-color-l;
    .yk-text{
        font-weight: 600;
    }
   }
  }
  .router-link-active{
    background: linear-gradient(180deg, #2b5aedde 0%, #2B5AED 100%) ;
    .yk-icon{
        color:@white;
    }
    .yk-text{
        color:@white;
        font-weight: 600;
    }
 }
}
</style>